<template>
  <div class="store-value">
    <div class="value-list">
      <div
        :class="['one', upValue == index ? 'up-val' : '']"
        v-for="(item, index) in storeValueList"
        :key="index"
        @click="this.upValue = index"
      >
        <div class="top">{{ item.baseAmount / 100 }}元</div>
        <div class="bottom" v-if="item.giftAmount > 0">
          得{{ (item.giftAmount + item.baseAmount) / 100 }}元
        </div>
        <i
          class="iconfont icon-weibiaoti-1 selected"
          v-if="upValue == index"
        ></i>
      </div>
    </div>
    <div class="ofter-value" v-if="storeValueConfig.allowAnyAmount">
      <div class="title">其他金额</div>
      <input
        type="digit"
        class="value-input"
        :placeholder="`请输入充值金额（最低充值${
          storeValueConfig.minAmount / 100
        })`"
        v-model="ofterPrice"
        maxlength="6"
        @focus="focusInput"
        :focus="isFocus"
      />
    </div>
    <div
      :class="['confirm-val', isComfirm ? '' : 'disable-click']"
      @click="confirmTopUP"
      v-if="storeValueConfig.allowAnyAmount || storeValueList.length > 0"
    >
      确认充值
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  getStoredBalanceConfig,
  getCustomerBalance,
  foundStoreValue,
} from "@/service/api/sp-store/storeValue";
import { getShopDetailNoload } from "@/service/api/sp-store";
export default {
  data() {
    return {
      upValue: 0,
      storeValueList: [],
      storeValueConfig: {},
      ofterPrice: "",
      customerBalance: {},
      shopInfo: {},
      isComfirm: true,
      isFocus:false,
    };
  },
  computed: {
    ...mapState("sp-store/index", ["pubShopId", "shopStatus", "pubShopInfo"]),
    ...mapState("sp-common/base", ["themeColor"]),
  },
  mounted() {
    this.getBaseConfig();
  },
  watch: {
    pubShopInfo: {
      handler(val) {
        this.getBaseConfig();
      },
      deep: true,
    },
  },
  methods: {
    getBaseConfig() {
      let {
        pubShopId: pubDomainBusinessId,
        pubShopInfo: { pubDomainBusinessId: shopId },
      } = this;
      // 获取储值基本信息
      getStoredBalanceConfig({ pubDomainBusinessId: shopId }).then((res) => {
        this.storeValueList = res.defaultAmounts;
        this.storeValueConfig = res;
      });
      // 获取钱包基本信息
      getCustomerBalance({ pubDomainBusinessId }).then((res) => {
        this.customerBalance = res;
      });
      // 获取门店相关数据
      getShopDetailNoload({ id: pubDomainBusinessId }).then((res) => {
        this.shopInfo = res;
      });
    },
    // 确认充值
    async confirmTopUP() {
      let {
        storeValueConfig: { allowAnyAmount, minAmount },
        ofterPrice = 0,
        customerBalance: { passwordSetStatus },
        shopStatus,
        storeValueList,
        upValue,
        shopInfo: { pubDomainBusinessId, id: pubShopId, shopName: pubShopName },
        themeColor,
      } = this;
      console.log(upValue)
      let shopSta = await this.$myTool.verifyShop({ type: "store" });
      if (!shopSta) {
        return;
      }
      ofterPrice = ofterPrice * 100;
      // 判断最低金额设置
      if (upValue < 0) {
        if (allowAnyAmount && ofterPrice < minAmount && ofterPrice > 0) {
          uni.showModal({
            content: `单笔最低充值${minAmount / 100}元`,
            showCancel: false,
            confirmColor: themeColor ? themeColor : "#ffb72f",
            confirmText: "我知道了",
          });
          this.isFocus = true
          return;
        }
      }

      if (shopStatus == 2) {
        uni.showModal({
          content: `门店已被禁用，暂不支持充值`,
          showCancel: false,
          confirmColor: themeColor ? themeColor : "#ffb72f",
          confirmText: "我知道了",
        });
        return;
      }
      // 判断是否设置过密码
      if (!passwordSetStatus) {
        uni.showModal({
          content: `您正在使用会员充值，为保证账户余额安全，请务必设置支付密码配合使用！`,
          confirmColor: themeColor ? themeColor : "#ffb72f",
          confirmText: "设置密码",
          success: (res) => {
            if (res.confirm) {
              this.$myTool.jumpPage("setPassword");
            }
          },
        });
        return;
      }
      let amount = 0;
      // if (ofterPrice > 0 && ofterPrice && allowAnyAmount) {
      //   amount = ofterPrice;
      // } else if (storeValueList.length > 0) {
      //   amount = storeValueList[upValue].baseAmount;
      // }
      if(upValue > -1){
        amount = storeValueList[upValue].baseAmount
      }else{
        amount = ofterPrice;
      }
      let queryParams = {
        amount,
        payChannel: 1,
        mercNo: "",
        pubDomainBusinessId,
        pubShopId,
        pubShopName,
      };
      console.log(queryParams)
      this.isComfirm = false;
      this.$myTool.verifyShop();
      // 创建储值订单
      foundStoreValue(queryParams).then((res) => {
        let { orderNo, storeNo } = res;
        this.$pay({
          xhOrderNo: orderNo,
          storeNo,
          fail: () => {
            this.isComfirm = true;
          },
        })
          .then((res) => {
            if (res.code == 0) {
              this.ofterPrice = "";
              uni.showToast({ title: "支付成功", icon: "none" });
            }
            this.isComfirm = true;
          })
          .catch((error) => {
            this.isComfirm = true;
          });
      });
    },
    // 输入框聚焦事件
    focusInput() {
      this.upValue = -1;
    },
  },
};
</script>

<style lang="scss" scoped>
.store-value {
  padding: 0 30rpx 0;
  height: 100%;
  overflow-y: scroll;
  .value-list {
    display: flex;
    flex-wrap: wrap;
    :nth-child(3n + 3) {
      margin-right: 0 !important;
    }
    .one {
      width: calc((100% / 3) - 25rpx);
      background: #ffffff;
      border-radius: 15px;
      margin-bottom: 20rpx;
      margin-right: 25rpx;
      padding: 30rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      border: 2px solid #fff;

      .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #181818;
        margin-bottom: 15rpx;
      }

      .bottom {
        font-size: 26rpx;
        font-weight: 500;
        color: #181818;
      }

      .selected {
        width: 54rpx;
        height: 54rpx;
        position: absolute;
        bottom: -2rpx;
        right: -2px;
        font-size: 54rpx;
        color: var(--theme-color);
      }
    }

    .up-val {
      border-color: var(--theme-color);
    }
  }

  .ofter-value {
    margin-top: 40rpx;

    .title {
      font-size: 29rpx;
      font-weight: 500;
      color: #181818;
      margin-bottom: 20rpx;
    }

    .value-input {
      background-color: #fff;
      height: 90rpx;
      line-height: 90rpx;
      padding-left: 30rpx;
    }
  }

  .confirm-val {
    line-height: 80rpx;
    background: var(--theme-color);
    border-radius: 40rpx;
    // position: fixed;
    // bottom: 50rpx;
    // left: 75rpx;
    width: calc(100% - 150rpx);
    margin: 150rpx auto 0;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
  }
}
</style>
